<script setup>
import { reactive,ref} from 'vue'
import { defineComponent } from 'vue';
import Login from '../../Login/login.vue'
import Phlogin from '../../Login/phlogin.vue'
import {qrcodeAPI,createAPI,testingAPI,statusAPI} from '../../../api/index'
import useStore from '../../../store'
const { useLogin,useData } = useStore()
// useData.setUser()
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
// console.log(route.matched[0].children);
const indexNav = ref(1)
const navswitch = (id,address) => {
  indexNav.value = id
  
  router.push({path:address})
}

const qrcode = ref('')
const visible = ref(false);
    const showModal = async () => {
      visible.value = true;
      const {data:{data:res}} = await qrcodeAPI(Date.parse(new Date()))
      console.log(res.unikey);
      const {data:{data:qr}} = await createAPI(res.unikey,1)
      console.log(qr.qrimg)
      qrcode.value = qr.qrimg
  //  轮询此接口可获取二维码扫码状态,800 为二维码过期,801 为等待扫码,802 为待确认,803 为授权登录成功(803 状态码下会返回 cookies)
      let time =  setInterval(async ()=>{
        const {data:testcode}  = await testingAPI(res.unikey,Date.parse(new Date())
        )
        if(testcode.code === 800) {
          console.log(800);
          clearInterval(time)
        }else if(testcode.code === 803){
          console.log(testcode);
          useLogin.cookie = testcode.cookie
          clearInterval(time)
        }
        
      },3000)
    };
    const stateCode = async ()=>{
      const {data:{data:res}} = await  statusAPI()
      console.log(res.account.id);
      // const detail = detailAPI(res.account.id)
      // console.log(detail);
    }
    stateCode()
    const isPhone = ref(true)
    const outden = () =>{
      isPhone.value = false
    }

    const add = () =>{
      isPhone.value = true
    }
</script>

<template>
      <div class="top">
        <a-row>
          <a-col :span="4">
            <div class="login png"></div>
          </a-col>
          <a-col :span="12">
            <div class="nav">
              <ul>
                <li :class="indexNav === item.meta.id ? 'default' : ''" v-for="item in route.matched[0].children" :key="item.id">
                    <a href="javascript:;" @click="navswitch(item.meta.id,item.path)">
                    {{item.meta.name}}
                    <span :class="indexNav === item.meta.id? 'cor png':''">{{}}</span>
                    <span :class="item.meta.id === 5? 'hot png':''" ></span>
                  </a>
                </li>
              </ul>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="inp">
               <div class="magnifier png">
              </div>
              <input type="text" placeholder="音乐/视频/电台/用户" class="inpSub">
            </div>
            <div class="literary">创作者中心</div>
            <div class="loginSub loginSpng" @click="showpng" v-if="useLogin.cookie">
              <img :src="useData.userdata.avatarUrl" alt="">
            </div>
            <div class="loginSub" @click="showModal" v-else>登录</div>
          </a-col>
        </a-row>
      </div>
      <div ref = 'replayModal'>
    <a-modal v-model:visible="visible" :title="isPhone?'登录':'手机号登录'"  :footer="null" :getContainer = '()=>$refs.replayModal' @cancel="add">
      <Login :qr="qrcode" @outden="outden" v-if="isPhone"></Login>
      <Phlogin @outden="outden" v-else></Phlogin>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

.png {
  background: url(../../../assets/images/topbar.png) no-repeat 0 9999px;
}
.top {
  width: 1100px;
  height: 70px;
  margin: 0 auto;
 
  .login {
    width: 176px;
    height: 69px;
    background-position: 0 0;
   
  }
}
.nav {
  height: 70px;
  ul {
    li {
      display: inline-block;
      &:hover {
          background: #000000;
        }
      a {
        position: relative;
        display: inline-block;
        padding: 0 19px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        color: #ccc;
        .cor {
          position: absolute;
          left: 50%;
          bottom: -1px;
          transform: translateX(-50%);
          width: 12px;
          height: 7px;
          overflow: hidden;
          background-position: -226px 0;
        }
        .hot {
          position: absolute;
          top: 21px;
          right: -17px;
          width: 28px;
          height: 19px;
          background-position: -190px 0;
        }
      }
      }
    }
  }
  .default {
    background: #000000;
  }
  .inp {
    float: left;
    position: relative;
    margin-top:19px;
    width: 158px;
    height: 32px;
    background-color: #fff;
    border-radius: 32px;
    .magnifier {
      position: absolute;
      top: 1px;
      left: 0px;
      width: 25px;
      height: 25px;
      background-position: 0 -99px;
      z-index: 999;
    }
    .inpSub {
      position: absolute;
      top: 20px;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 12px;
      color: #9b9b9b;
      margin-top: -20px;
      border-radius: 32px;
      border: 0;
      outline: none;
      padding-left: 27px;
    }
  }
  .literary {
    float: left;
    width: 90px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    text-align: center;
    margin: 19px 0 0 22px;
    box-sizing: border-box;
    border: 1px solid #4F4F4F;
    background-position: 0 -140px;
    color: #ccc;
    border-radius: 20px;
    transition: all 0.3s;
   

    &:hover {
      border:1px solid #fff;
      cursor: pointer;
    }
}
.loginSub {
    float: left;
    width: 28px;
    margin-top: 4px;
    margin-left: 30px;
    color: #787878;
    font-size: 12px;
    &:hover {
      cursor: pointer;
      color: #666;
      text-decoration:underline;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
}
/deep/ .ant-modal-header{
  height: 38px;
  line-height: 38px;
  background-color: #2d2d2d;
  padding: 7px 24px;
}
/deep/ .ant-modal-title {
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}
/deep/ .ant-modal-close-x {
  width: 10px;
  height: 10px;
  color: #888888;
  margin-right: 20px;
  margin-top: -8px;
  font-size: 14px;
}
</style>